:host .navigation-container {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: url("../../../assets/images/nav_bg.png") no-repeat center;
    background-size: 100% 100%;
    min-width: 600px;
    min-height: 500px;
}

:host .navigation-header {
    width: 100%;
    background: url("../../../assets/images/title.png") no-repeat center;
    height: 27%;
}

:host .navigation-content {
    width: 950px;
    margin: auto;
}

:host .nav-row {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

:host .nav-row:nth-of-type(2) {
    margin-top: 40px;
}

:host .nav-row > .nav-col {
    width: 33.3%;
}

:host .nav-col {
    background: no-repeat 50%, 50%;
    margin: 5px;
    border-radius: 6px;
}

:host .nav-col:focus {
    outline: 0;
}

:host .nav-icon {
    width: 100%;
    height: 130px;
    text-align: center;
}

:host .nav-icon > img {
    height: 100%;
}

:host .nav-text {
    color: white;
    text-align: center;
    font-weight: bold;
    font-size: 1.3rem;
    padding: 10px;
}

:host .nav-col:hover {
    cursor: pointer;
    background: rgba(255, 255, 255, 0.2);
    box-shadow: 0 0 20px 4px #a0d5ea;
}

:host .exit-icon {
    background: url("../../../assets/images/exit.png") no-repeat center;
    background-size: 100% 100%;
    width: 23px;
    height: 24px;
    position: absolute;
    right: 20px;
    top: 20px;
    z-index: 999;
    cursor: pointer;
}

:host .no-menu-tip {
    position: absolute;
    left: 50%;
    top: 50px;
    transform: translate(-50%, -20px);
    font-size: 20px;
    color: red;
}
